<template>
  <div>
    <el-table :data="menuData" style="width: 100%">
      <!-- 表格列配置 -->
      <el-table-column prop="menuName" label="菜单名称"></el-table-column>
      <el-table-column prop="isActivated" label="是否启用"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="openDialog(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 动态的 el-dialog -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%"
      @close="clearInput"
      custom-class="custom-dialog-header"
    >
      <!-- 根据 dialogType 渲染不同级别的表单项 -->
      <!-- 这里根据您的数据结构进行动态渲染 -->
      <!-- 一级菜单 -->
      <div v-if="dialogType === '一级菜单'">
        <!-- 渲染一级菜单的表单项 -->
      </div>
      <!-- 二级菜单 -->
      <div v-if="dialogType === '二级菜单'">
        <!-- 渲染二级菜单的表单项 -->
      </div>
      <!-- 三级菜单 -->
      <div v-if="dialogType === '三级菜单'">
        <!-- 渲染三级菜单的表单项 -->
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" type="primary">完成</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuData: [ // 模拟菜单数据，包括菜单名称、是否启用、菜单级别等信息
        { menuName: '首页', isActivated: '是', level: 1 },
        { menuName: '技术运营联动', isActivated: '是', level: 1 },
        { menuName: '事件处置', isActivated: '是', level: 2 },
        { menuName: '事件辅助通知', isActivated: '是', level: 3 },
        // 添加更多菜单数据
      ],
      dialogVisible: false, // 对话框可见性
      dialogType: '', // 对话框类型，根据行数据动态设置
    };
  },
  computed: {
    dialogTitle() {
      return `查看${this.dialogType}`;
    },
  },
  methods: {
    openDialog(row) {
      console.log(row);
      // 根据行数据的 level 属性确定打开的对话框类型
      switch (row.level) {
        case 1:
          this.dialogType = '一级菜单';
          break;
        case 2:
          this.dialogType = '二级菜单';
          break;
        case 3:
          this.dialogType = '三级菜单';
          break;
        default:
          this.dialogType = '';
          break;
      }
      // 清空表单数据等操作
      this.dialogVisible = true; // 打开对话框
    },
    clearInput() {
      // 在关闭对话框时清空输入框的值
      // 可根据实际需要进行处理
      this.dialogVisible = false;
    },
  },
};
</script>
